<!DOCTYPE html>
<html>

<!-- Head -->
<head>

	<title>登录表单</title>

	<!-- Meta-Tags -->
		<meta Name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type='text/javascript' src='{$JS_PATH}jquery-1.8.3.min.js'></script>
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //Meta-Tags -->

	<!-- Style --> <link rel="stylesheet" href="{$CSS_PATH}loginStyle.css" type="text/css" media="all">
	<!-- Style --> <link rel="stylesheet" href="{$CSS_PATH}loginStyle.css" type="text/css" media="all">


<style>
	.pwd{width:40px;height:20px;line-height:14px;padding-top:2px;} 
.pwd_f{color:#BBBBBB;} 
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} 
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} 
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} 
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} 
.pwd_c_r{border-right:1px solid #D0D0D0;} 
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;} 
.pwd_Medium_c_r{border-right:1px solid #E9AE10;} 
.pwd_Strong_c_r{border-right:1px solid #267A12;}
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #eee;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  padding: 10px;
  background-color: #000;
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
  color: white;
  font-size: 18px;
  border-radius: 12px;
}
</style>


</head>
<!-- //Head -->

<!-- Body -->
<body style="background-image: url('{$IMG_PATH}login.jpg');">

	<h1 style="padding: 60px;">总有未知<br>等待我们前往</h1>


<div id="Modals" style="position: fixed; top: 120px; height: 100%; width: 100%; z-index: 99999; display: block; ">
    
	
	<div class="container w3layouts agileits" style="margin:0px auto;/*padding:30px;width:860px;broder:1px solid #ccc;border-radius:16px;background:#ffe;*/" id="Modals-frame">
	
	<!-- 登录界面 -->
		<div class="login w3layouts agileits" id="login_div">
			<h2>登 录</h2>
			<form action="{:url('index/login/doLogin')}" method="post" name="myform">
				<select id="emlogin" name="emlogin" onchange="EMLogin(this.value)">
						<option value="1" selected>手机登录</option>
						<option value="2">邮箱登录</option>
				</select>
				<input type="text" Name="Userame" placeholder="手机号">
				<input type="text" Name="UserameE" placeholder="邮箱">
				<input type="password" Name="Password" placeholder="密码">

				<ul class="tick w3layouts agileits">
					<li>
						<input type="checkbox" id="brand1" Name="check">
						<label for="brand1"><span></span>7天免登陆</label><br>
					</li>
				</ul>
				<div class="send-button w3layouts agileits">
						<input type="submit" value="登 录">
				</div>
			</form>
			<a href="javascript:regblock();">切换至注册>>></a>	
			<script type="text/javascript">
				function regblock(){
					login_div.style.display='none';
					reg_div.style.display='block';
				}
			</script>
			<div class="social-icons w3layouts agileits">
				<p>- 其他方式登录 -</p>
				<ul>
					<li class="qq"><a href="#">
					<span class="icons w3layouts agileits"></span>
					<span class="text w3layouts agileits">QQ</span></a></li>
					<li class="weixin w3ls" ><a href="{:url('index/login/weixin')}">
					<span class="icons w3layouts"></span>
					<span class="text w3layouts agileits">微信</span></a></li>
					<li class="weibo aits"><a href="#">
					<span class="icons agileits"></span>
					<span class="text w3layouts agileits">微博</span></a></li>
					<div class="clear"> </div>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		

	<!-- 注册界面 -->
		<div class="register w3layouts agileits" id="reg_div" style="display: none;">
			<a href="javascript:loginblock();" style="float: right;color:white;">切换至登录>>></a>
				<h2>注 册</h2>

				<script type="text/javascript">
					function loginblock(){
						reg_div.style.display='none';
						login_div.style.display='block';
					}
				</script>
				<form action="{:url('index/login/register')}" method="post" Name="rform"> <!--register form-->
					<input type="text" Name="Name" placeholder="用户名 1-12位" required="" onchange="checkName()">
					<select id="eom" name="eom" onchange="showEM(this.value)">
							<option value="1" selected>手机验证</option>
							<option value="2">邮箱验证</option>
					</select>
					<input type="text" Name="Email" placeholder="邮箱" onchange="testEmail()" >
					<div><span style="display: inline-block; padding :10px 16px;text-align: center;background: #eee;border: 1px solid #eee; border-radius: 12px;" id="sendE" onclick="checkEmail()">发送邮箱验证</span></div>
					<input type="text" Name="cEmail"  placeholder="邮箱验证码">
					
					<input type="text" Name="Tel" placeholder="手机号码" onchange="testMobile()">
					<div><span style="display: inline-block; padding :10px 16px;text-align: center;background: #eee;border: 1px solid #eee; border-radius: 12px;" id="sendM" onclick="checkMobile()">发送手机验证</span></div>
					<input type="text" Name="cTel" placeholder="手机验证码" >
					<input type="password" Name="Password" placeholder="密码 6-12位" required="" onchange="checkPass()" onKeyUp="CheckIntensity(this.value)">
					<table border="0" cellpadding="0" cellspacing="0"> 
					 <tr align="center"> 
					  <td id="pwd_Weak" class="pwd pwd_c"> </td> <br>
					  <td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td> <br>
					  <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td> <br>
					 </tr> 
					</table> 
					<input type="password" Name="RePassword" placeholder="再次输入密码" required="" onchange="checkRepass()">
				
						<div class="send-button w3layouts agileits">
							<input type="submit" value="免费注册" onsubmit="checkAll()">
						</div>
				</form>
				<script>

					function EMLogin($v){
						if($v == 1){
							//手机登录
							document.myform.Userame.style.display = 'block';
							document.myform.UserameE.style.display = 'none';
						}else{
							document.myform.Userame.style.display = 'none';
							document.myform.UserameE.style.display = 'block';
						}
					}

					EMLogin(document.getElementById('emlogin').value);

					function showEM($eomvalue){
						if($eomvalue == 1){
							document.rform.Email.style.display="none";
							document.rform.cEmail.style.display="none";
							document.rform.Tel.style.display="block";
							document.rform.cTel.style.display="block";
							document.getElementById('sendE').style.display = 'none';
							document.getElementById('sendM').style.display = 'inline-block';
						}else{
							document.rform.Email.style.display="block";
							document.rform.cEmail.style.display="block";
							document.rform.Tel.style.display="none";
							document.rform.cTel.style.display="none";
							document.getElementById('sendE').style.display = 'inline-block';
							document.getElementById('sendM').style.display = 'none';
						}
					}

					showEM(document.getElementById('eom').value);

					function checkName(){
						var user = document.rform.Name.value;
				        if (user.match(/^.{1,12}$/) == null) {
				            alert('用户名格式不正确');
				            return false;
				        } 
				        return true;
					}

					function checkEmail() {
			            var email = document.rform.Email.value;
			            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]){1,3}/ ;
		        		if(email.match(reg) == null){
		        			alert('邮箱格式不正确');
		        			return false;
		        		}
		        		alert('邮箱验证码已发送');
			            $.ajax({
			                type : 'post',
			                url : '{:url("index/login/sendEmail")}',
			                dataType : 'json',
			                data : {'email' : email},
			                // 请求成功
			                success : function (data) {
			                    console.log(data);
			                },
			                // 请求失败
			                error : function(XMLHttpRequest, textStatus, errorThrown) {
	                        // alert('XMLHttpRequest.status');
	                        // alert(XMLHttpRequest.readyState);
	                        // alert(textStatus);
	                        alert('发送失败 请重试');
	                    	}/*function() {
			                     alert('AJAX 执行失败了');
			                }*/
			            });
		        	}

		        	function checkMobile() {
			            var tel = document.rform.Tel.value;
			            var reg = /^1[3|4|5|8|9]\d{9}$/ ;
		        		if(tel.match(reg) == null){
		        			alert('手机号码格式不正确');
		        			return false;
		        		}
		        		alert('手机验证码已发送');
			            $.ajax({
			                type : 'post',
			                url : '{:url("index/login/sendMobile")}',
			                dataType : 'json',
			                data : {'tel' : tel},
			                // 请求成功
			                success : function (data) {
			                    console.log(data);
			                    return true;
			                },
			                // 请求失败
			                error : function(XMLHttpRequest, textStatus, errorThrown) {
		                        /*alert(XMLHttpRequest.status);
		                        alert(XMLHttpRequest.readyState);
		                        alert(textStatus);*/
		                        return false;
	                    	}
			            });
		        	}


		        	function checkPass(){
		        		var length = document.rform.Password.value.length;
		        		if(length>'12')
		        		{
		        			alert('密码长度过长');
		        			return false;
		        		}else if(length<'6')
		        		{
		        			alert('密码长度过短');
		        			return false;
		        		}
		        		return true;
		        	}

		        	function checkRepass(){
		        		var pass = document.rform.Password.value;
		        		var repass = document.rform.RePassword.value;
		        		if(pass != repass){
		        			alert('密码不一致');
		        			console.log(pass);
		        			console.log(repass);
		        			return false;
		        		}
		        		return true;
		        	}

		        	function testEmail(){
		        		var email = document.rform.Email.value;
		        		var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]){1,3}/ ;
		        		if(email.match(reg) == null){
		        			alert('邮箱格式不正确');
		        			return false;
		        		}
		        		return true;
		        	}

		        	function testMobile(){
		        		var tel = document.rform.Tel.value;
		        		var reg = /^1[3|4|5|8|9]\d{9}$/ ;
		        		if(tel.match(reg) == null){
		        			alert('手机号码格式不正确');
		        			return false;
		        		}
		        		return true;
		        	}

		        	function CheckIntensity(pwd){ 
						 var Mcolor,Wcolor,Scolor,Color_Html; 
						 var m=0; 
						 var Modes=0; 
						 for(i=0; i<pwd.length; i++){ 
						  var charType=0; 
						  var t=pwd.charCodeAt(i); 
						  if(t>=48 && t <=57){charType=1;} 
						  else if(t>=65 && t <=90){charType=2;} 
						  else if(t>=97 && t <=122){charType=4;} 
						  else{charType=4;} 
						  Modes |= charType; 
						 } 
						 for(i=0;i<4;i++){ 
						 if(Modes & 1){m++;} 
						   Modes>>>=1; 
						 } 
						 if(pwd.length<=4){m=1;} 
						 if(pwd.length<=0){m=0;} 
						 switch(m){ 
						  case 1 : 
						   Wcolor="pwd pwd_Weak_c"; 
						   Mcolor="pwd pwd_c"; 
						   Scolor="pwd pwd_c pwd_c_r"; 
						   Color_Html="弱"; 
						  break; 
						  case 2 : 
						   Wcolor="pwd pwd_Medium_c"; 
						   Mcolor="pwd pwd_Medium_c"; 
						   Scolor="pwd pwd_c pwd_c_r"; 
						   Color_Html="中"; 
						  break; 
						  case 3 : 
						   Wcolor="pwd pwd_Strong_c"; 
						   Mcolor="pwd pwd_Strong_c"; 
						   Scolor="pwd pwd_Strong_c pwd_Strong_c_r"; 
						   Color_Html="强"; 
						  break; 
						  default : 
						   Wcolor="pwd pwd_c"; 
						   Mcolor="pwd pwd_c pwd_f"; 
						   Scolor="pwd pwd_c pwd_c_r"; 
						   Color_Html="无"; 
						  break; 
						 } 
						 document.getElementById('pwd_Weak').className=Wcolor; 
						 document.getElementById('pwd_Medium').className=Mcolor; 
						 document.getElementById('pwd_Strong').className=Scolor; 
						 document.getElementById('pwd_Medium').innerHTML=Color_Html; 
						}

					function checkAll(){
						if(document.getElementById('eom').value == 1){
							return  testMobile && checkPass() && checkRepass() &&checkName() && checkMobile();
						}else{
							return testEmail()&& checkPass() && checkRepass() &&checkName() && checkEmail();
						}
					}

					// function weixin(){
					// 	var obj = new WxLogin({
     //                          id:"login_container", 
     //                          appid: "", 
     //                          scope: "", 
     //                          redirect_uri: "",
     //                          state: "",
     //                          style: "",
     //                          href: ""
     //                        });
					// }
				</script>
		</div>
			<div class="clear"></div>
		</div>

		<div class="clear"></div>

		
		<!-- 微信登录引入 -->
		<!-- <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> -->



	</div>
</div>

</body>
<!-- //Body -->

</html>